<template>
  <div>
    <button @click="showModal = true">Show Modal</button>
    <ModalComponent v-if="showModal" @close="showModal = false">
      <template slot="modal-header">{{ modalText }}</template>
      <template slot="modal-text">{{ modalText }}</template>
      <template slot="modal-footer"><button class="btn btn-primary">Save Changes</button></template>
    </ModalComponent>
  </div>
</template>
<script>
import ModalComponent from './ModalComponent.vue';

export default {
  components: {
    ModalComponent
  },
  data() {
    return {
      showModal: false,
      modalText: '0'
    }
  },
  methods: {
    showModalFn: function (showModalData) {
      this.showModal = !this.showModal;
      this.modalText = 'nonsense'
    }
  }
}
</script>
<style lang="">

</style>